<template>
  <div>
    <div class="business-container">
      <div class="business-title">美客多PDF处理</div>

      <a-form>
        <a-form-item field="file" label="文件">
          <a-upload draggable action="/" :custom-request="customRequest"  :show-file-list="false" style="width: 400px" />
        </a-form-item>

        <a-form-item field="file" label="返回结果">
          <div v-if="result.output">
            <a-button type="text" @click="openPdf" >{{ result.filename }}</a-button>
            <a-button class="result-button" type="primary" status="success" shape="round" size="mini" @click="openPdf">
              浏览pdf  <icon-eye />
            </a-button>
            <a-button class="result-button" type="primary" shape="round" size="mini" @click="downloadPdf">
              下载pdf  <icon-download />
            </a-button>
          </div>
          <div v-else>
            请先上传文件
          </div>
        </a-form-item>
      </a-form>
    </div>


  </div>
</template>
<script lang="ts" setup>
import { Message } from "@arco-design/web-vue";

useHead({
  title: "美客多PDF处理"
})

const form = ref({
  file: '',
});

const result = ref({
  message: '',
  output:'',
  filename:"",
  success: false
});

function copyText() {
  const textarea = document.createElement('textarea');
  console.log(window.location.hostname)
  textarea.value = result.value.output;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('Copy');
  document.body.removeChild(textarea);

  Message.success("链接复制成功")
}

function openPdf() {
  console.log(result.value.output)
  window.open(result.value.output, "_block")
}
function downloadPdf() {
  let url = result.value.output
  let name = result.value.filename
  // 发送http请求，将文件链接转换成文件流
  let xhr = new XMLHttpRequest()
  xhr.open('get', url, true)
  // 请求类型
  xhr.responseType = 'blob'
  xhr.onreadystatechange = function() {
    // 获取接口结果
    if (xhr.readyState === 4 && xhr.status === 200) {
      window.URL = window.URL || window.webkitURL
      let a = document.createElement('a')
      let blob = new Blob([xhr.response])
      // 通过二进制文件创建url
      let url = window.URL.createObjectURL(blob)
      a.href = url
      a.download = name
      a.click()
      // 销毁创建的url
      window.URL.revokeObjectURL(url)
    }
  }
  xhr.send()

}

const customRequest = async (option: any) => {

  const {onProgress, onError, onSuccess, fileItem, name} = option
  const xhr = new XMLHttpRequest();
  const res: any = await yujiUpload("/upload", { method: 'POST',data:{ "file": fileItem.file} })

  if(res.code == 1) {
    result.value = {
      message: res.message,
      output: res.output,
      filename: res.filename,
      success: true
    }
    Message.success(res.message)
  }else{
    result.value = {
      message: res.message,
      output: "",
      filename: "",
      success: false
    }
    Message.error(res.message)

  }
  return {
    abort() {
      xhr.abort()
    }
  }
};



</script>
<style lang="scss" scoped>

.business-container{
  margin: 60px auto;
  padding-bottom: 200px;
  position: relative;
  width: 1200px;
  .business-title{
    font-size: 48px;
    font-weight: 600;
    color: #000000;
    line-height: 56px;
    margin-bottom:30px;
    text-align: center;
  }
  .result-button{
    margin-right: 10px;
  }
}

</style>